import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Input,Button,Select,message,Transfer, Switch} from 'antd';
import styles from '../checkpoint/index.less';
const Option = Select.Option;


export default connect(({ check, loading }) => ({ check, loading }))(({check, dispatch,loading})=>
    <div className={styles.container}><PagesPOST dispatch={dispatch} {...check} loading={loading.global}/></div>);

class PagesPOST extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            nameADD: "",
            numADD:"",
            locationADD:"",
            descr :"",
            localADD:[],
            localXMADD:[],
        };
    }
    componentWillMount () {
        if (this.props.record.id && this.props.record.id !== 'NEW') {
            let {name,num,location,route_id,remark,item_id} = this.props.record;
            let localXMADD =[];
            item_id.map(item=>{
                localXMADD.push(item.id);
            });
            let arr = [];
            route_id.map(item=>arr.push(item.route_id));
            this.setState({
                nameADD: name,
                numADD:num,
                locationADD:location,
                descr :remark,
                localXMADD:localXMADD,
                localADD:arr,
                disable:true,
            });
        }else if(this.props.record.id === 'NEW'){
            this.props.dispatch({type:"check/goList",payload:{record:{id:'NEW'}}});
        }else {
            this.props.dispatch({type:'check/goBack'});
        }
    }
    render () {
        let {local,localXM,loading} = this.props;
        local && local.map(item => item.key = item.id);
        return (
            <div style={{paddingLeft:40}}>
                <div>
                    <span><span style={{color: 'red'}}>*</span>巡检点编号:</span>
                    <Input value={this.state.numADD} style={{width: 400, margin: 10}}
                        onChange={e => this.setState({numADD: e.target.value})}
                        placeholder="巡检点编号"/>
                </div>
                <div>
                    <span><span style={{color: 'red'}}>*</span>巡检点名称:</span>
                    <Input value={this.state.nameADD} style={{width: 400, margin: 10}}
                        onChange={e => this.setState({nameADD: e.target.value})}
                        placeholder="巡检点名称"/>
                </div>
                <div>
                    <span><span style={{color: 'red'}}>*</span>巡检点位置:</span>
                    <Input value={this.state.locationADD} style={{width: 400, margin: 10}}
                        onChange={e => this.setState({locationADD: e.target.value})}
                        placeholder="巡检点位置"/>
                </div>
                <div>
                    <span><span style={{color: 'red'}}>*</span>检查的项目:</span>
                    <Select mode="multiple" placeholder="请选择" value={this.state.localXMADD} style={{ width: 400,margin:10 }}
                        onChange={value=>{
                            this.setState({
                                localXMADD:value,
                            });
                        }}>
                        {localXM && localXM.map(item =>{
                            return <Option key={item.id} value={item.id}>{item.item_name}</Option>;
                        })}
                    </Select>
                </div>
                <div style={{display:'flex'}}>
                    <span><span style={{color: 'red'}}>*</span>巡检的路线:</span>
                    <Transfer
                        style={{ marginLeft:10 }}
                        dataSource={local || []}
                        titles={['巡检路线', '已选中巡检路线']}
                        targetKeys={this.state.localADD}
                        onChange={(nextTargetKeys, direction, moveKeys)=>{
                            // console.log('targetKeys: ', nextTargetKeys);
                            this.setState({localADD:nextTargetKeys});
                        }}
                        render={item => item.route_name}
                    />
                </div>
                <div>
                    <span><span style={{color: 'red', width: 30}}>*</span>请输入备注:</span>
                    <Input value={this.state.descr} style={{width: 400, margin: 10}}
                        onChange={e => this.setState({descr: e.target.value})}
                        placeholder="备注说明"/>
                </div>
                <Button loading={loading} style={{margin: 20}} type="primary" onClick={() => {
                    let {nameADD, numADD, locationADD, localADD, descr,localXMADD} = this.state;
                    if (nameADD && numADD && locationADD && descr && localXMADD && localADD) {
                        let body = {
                            name: nameADD,
                            num: numADD,
                            location: locationADD,
                            route_id :localADD,
                            item_id:localXMADD,
                            remark: descr,
                        };
                        if (this.props.record.id && this.props.record.id !== 'NEW') {
                            body.id = this.props.record.id;
                        }
                        this.props.dispatch({
                            type: this.props.record.id =='NEW' ? "check/postCheck" : "check/putCheck",
                            payload: body,
                        });
                    } else {
                        message.error('项目未填写完整！');
                    }

                }}>提交</Button>
                <Button onClick={()=>{
                    this.props.dispatch({type:'check/goBack'});
                }}>取消</Button>
            </div>
        );
    }
}